<html lang="en">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>School timetabling - Timefold Spring Boot</title>
  <!-- Use versioned web jars since native mode do not support web jar locator -->
  <link rel="stylesheet" href="/webjars/bootstrap/5.2.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/webjars/font-awesome/5.15.1/css/all.css" />
  <link rel="stylesheet" href="/webjars/timefold/css/timefold-webui.css" />
  <link rel="icon" href="/webjars/timefold/img/timefold-favicon.svg" type="image/svg+xml">
</head>
<body>
<header id="timefold-auto-header">
  <!-- Filled in by app.js -->
</header>
<div class="tab-content">
  <div id="demo" class="tab-pane fade show active container">
    <div class="sticky-top d-flex justify-content-center align-items-center" aria-live="polite" aria-atomic="true">
      <div id="notificationPanel" style="position: absolute; top: .5rem;"></div>
    </div>
    <h1>High school timetable solver</h1>
    <p>Generate the optimal schedule for your teachers and students.</p>

    <div class="mb-2">
      <button id="solveButton" type="button" class="btn btn-success">
        <span class="fas fa-play"></span> Solve
      </button>
      <button id="stopSolvingButton" type="button" class="btn btn-danger">
        <span class="fas fa-stop"></span> Stop solving
      </button>
      <span id="score" class="score ms-2 align-middle fw-bold">Score: ?</span>
      <button id="analyzeButton" type="button" class="ms-2 btn btn-secondary">
        <span class="fas fa-question"></span>
      </button>


      <div class="float-end">
        <ul class="nav nav-pills" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="byRoomTab" data-bs-toggle="tab"
                    data-bs-target="#byRoomPanel" type="button" role="tab" aria-controls="byRoomPanel"
                    aria-selected="true">By room
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="byTeacherTab" data-bs-toggle="tab" data-bs-target="#byTeacher"
                    type="button" role="tab" aria-controls="byTeacher" aria-selected="false">By teacher
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="byStudentGroupTab" data-bs-toggle="tab"
                    data-bs-target="#byStudentGroup" type="button" role="tab" aria-controls="byStudentGroup"
                    aria-selected="false">By student group
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="byRoomPanel" role="tabpanel" aria-labelledby="byRoomTab">
        <table class="table table-borderless table-striped" id="timetableByRoom">
          <!-- Filled in by app.js -->
        </table>
      </div>
      <div class="tab-pane fade" id="byTeacher" role="tabpanel" aria-labelledby="byTeacherTab">
        <table class="table table-borderless table-striped" id="timetableByTeacher">
          <!-- Filled in by app.js -->
        </table>
      </div>
      <div class="tab-pane fade" id="byStudentGroup" role="tabpanel" aria-labelledby="byStudentGroupTab">
        <table class="table table-borderless table-striped" id="timetableByStudentGroup">
          <!-- Filled in by app.js -->
        </table>
      </div>
    </div>

    <h2>Unassigned lessons</h2>
    <div id="unassignedLessons" class="row row-cols-3 g-3 mb-4"></div>
  </div>

  <div id="rest" class="tab-pane fade  container-fluid">
    <h1>REST API Guide</h1>

    <h2>High school timetable solver integration via cURL</h2>

    <h3>1. Download demo data</h3>
    <pre>
            <button class="btn btn-outline-dark btn-sm float-end"
                    onclick="copyTextToClipboard('curl1')">Copy</button>
            <code id="curl1">curl -X GET -H 'Accept:application/json' http://localhost:8080/demo-data/SMALL -o sample.json</code>
    </pre>

    <h3>2. Post the sample data for solving</h3>
    <p>The POST operation returns a <code>jobId</code> that should be used in subsequent commands.</p>
    <pre>
            <button class="btn btn-outline-dark btn-sm float-end"
                    onclick="copyTextToClipboard('curl2')">Copy</button>
            <code id="curl2">curl -X POST -H 'Content-Type:application/json' http://localhost:8080/timetables -d@sample.json</code>
    </pre>

    <h3>3. Get the current status and score</h3>
    <pre>
            <button class="btn btn-outline-dark btn-sm float-end"
                    onclick="copyTextToClipboard('curl3')">Copy</button>
            <code id="curl3">curl -X GET -H 'Accept:application/json' http://localhost:8080/timetables/{jobId}/status</code>
    </pre>

    <h3>4. Get the complete solution</h3>
    <pre>
            <button class="btn btn-outline-dark btn-sm float-end"
                    onclick="copyTextToClipboard('curl4')">Copy</button>
            <code id="curl4">curl -X GET -H 'Accept:application/json' http://localhost:8080/timetables/{jobId}</code>
    </pre>

    <h3>5. Terminate solving early</h3>
    <pre>
            <button class="btn btn-outline-dark btn-sm float-end"
                    onclick="copyTextToClipboard('curl5')">Copy</button>
            <code id="curl5">curl -X DELETE -H 'Accept:application/json' http://localhost:8080/timetables/{id}</code>
    </pre>
  </div>

  <div id="openapi" class="tab-pane fade container-fluid">
    <h1>REST API Reference</h1>
    <div class="ratio ratio-1x1">
      <!-- "scrolling" attribute is obsolete, but e.g. Chrome does not support "overflow:hidden" -->
      <iframe src="/swagger-ui/index.html" style="overflow:hidden;" scrolling="no"></iframe>
    </div>
  </div>
</div>
<footer id="timefold-auto-footer"></footer>
<div class="modal fadebd-example-modal-lg" id="scoreAnalysisModal" tabindex="-1" aria-labelledby="scoreAnalysisModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="scoreAnalysisModalLabel">Score analysis  <span id="scoreAnalysisScoreLabel"></span></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="scoreAnalysisModalContent">
        <!-- Filled in by app.js -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Use versioned web jars since native mode do not support web jar locator -->
<script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
<script src="/webjars/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<script src="/webjars/js-joda/1.11.0/dist/js-joda.min.js"></script>
<script src="/webjars/timefold/js/timefold-webui.js"></script>
<script src="/app.js"></script>
</body>
</html>
